<template>
  <div class="payment-detail">
    <order-detail :orderId="$route.params.orderId"  status="等待买家付款" @onBack="back">
      <template #express="slotProps">
        <div class="user-info">
          <div>
            <span class="user-info-name">{{ slotProps.info.consignee }}</span>
            <span>{{ slotProps.info.mobile }}</span>
          </div>
          <div class="address">
            <span>{{ slotProps.info.address }}</span>
          </div>
        </div>
      </template>

      <template #footer>
        <div class="order-bottom-buttons">
          <span class="bttom-button" @click="cancle">关闭</span>
          <span class="bttom-button button-pay" @click="prePay">付款</span>
        </div>
      </template>
    </order-detail>
  </div>
</template>

<script>

import OrderDetail from '@/components/OrderDetail'
import {orderDetail, orderPrepay} from '../../api/order'

export default {
  name: 'detail',
  components: {OrderDetail},
  data () {
    return {
      orderGoods: [],
      orderInfo: {}
    }
  },

  methods: {
    prePay () {
      this.$router.push({name: 'pay'})
      // orderPrepay({orderId: this.orderInfo.id}).then(res => {
      //     this.$router.push({name:'pay',})
      // })
    },
    cancle () {},

    back () {
      this.$router.back()
    }
  }
}
</script>

<style scoped>

.order-bottom-buttons {
  left: 0;
  padding: 10px;
  background: white;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
  position: fixed;
  right: 0;
  bottom: 0;

}

.bttom-button {
  margin-right: 5px;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  border: 1px #c5c5c5 solid;
}

.button-pay {
  color: #E65D6E;
  border: 1px #E65D6E solid;

}

span {
  padding: 0;
  margin: 0;
}
</style>
